<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="goods.css">
<style>
    li,ul{
        list-style: none;
        color: gray;
    }
    dt,dd{
        display: inline-block;
    }
    a{
        color: gray;
        text-decoration: none;
        border: 1px solid gray;
    }

</style>
</head>


<body>
    <div class="goodsinfo">
        <form action="" class="choose">
            <ul>
                <li class="product">
                    <dl>
                        <dt>颜色：</dt>
                        <dd>
                            
                            
                          
                        </dd>
                    </dl>
                </li>

                <li class="product1">
                    <dl>
                        <dt>版本：</dt>
                        <dd>
                           
                           
                            
                        </dd>
                    </dl>
                </li>
            </ul>
        </form>
    </div>
    <script>
        // data 变量表示的是服务端发给我们的商品的sku(货品)信息，根据数据 将可以选择的信息显示在ul标签中，最终显示结果  颜色：白色 黑色  内存：2G 4G 倒推
        var data = [{
                "id": 6,
                "goodsId": 38,
                "goodsSku": {"颜色":"白色","内存":"2G"},
                "goodsCode": "x01",
                "goodsSpec": "",
                "saleNumber": 0,
                "total": 100,
                "shopPrice": "1.00",
                "marketPrice": "10.00",
                "status": 1
            },
            {
                "id": 7,
                "goodsId": 38,
                "goodsSku": {"颜色":"白色","内存":"4G"},
                "goodsCode": "x02",
                "goodsSpec": "",
                "saleNumber": 0,
                "total": 100,
                "shopPrice": "2.00",
                "marketPrice": "9.00",
                "status": 1
            },
            {
                "id": 8,
                "goodsId": 38,
                "goodsSku": {"颜色":"黑色","内存":"2G"},
                "goodsCode": "x03",
                "goodsSpec": "",
                "saleNumber": 0,
                "total": 100,
                "shopPrice": "3.00",
                "marketPrice": "8.00",
                "status": 1
            },
            {
                "id": 9,
                "goodsId": 38,
                "goodsSku": {"颜色":"黑色","内存":"4G"},
                "goodsCode": "x04",
                "goodsSpec": "",
                "saleNumber": 0,
                "total": 100,
                "shopPrice": "4.00",
                "marketPrice": "7.00",
                "status": 1
            }
        ];

        var a1=[data[0].goodsSku['颜色'],data[1].goodsSku['颜色'],data[2].goodsSku['颜色'],data[3].goodsSku['颜色']]
        
       
        var a2=[data[0].goodsSku['内存'],data[1].goodsSku['内存'],data[2].goodsSku['内存'],data[3].goodsSku['内存']]
var a3=document.querySelector(".product >dl>dd")
var a4=document.querySelector(".product1 >dl>dd")

var str ='';
a1.forEach(function (item,index) {


str += `
<a class="selected" href="javascript:;">${data[index].goodsSku['颜色']}<input type="radio" name="color"checked="checked"></a>
`
})
a3.innerHTML = str
var str1 ='';
a2.forEach(function (item,index) {

    
str1 += `
<a class="selected" href="javascript:;">${data[index].goodsSku['内存']}<input type="radio" name="neicun"checked="checked"></a>
`
})
a4.innerHTML = str1
     
       


    </script>
</body>

</html>